<template>
  <div class="setup-container">
    <el-card class="setup-card">
      <template #header>
        <div class="card-header">
          <h2>NGINX-UI 首次使用设置</h2>
        </div>
      </template>

      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <h3>管理员账户</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" />
        </el-form-item>

        <h3>Nginx 配置</h3>
        <el-form-item label="Docker 部署" prop="isDockerized">
          <el-switch v-model="form.isDockerized" active-text="是" inactive-text="否" />
        </el-form-item>

        <template v-if="!form.isDockerized">
          <el-form-item label="Nginx 路径" prop="nginxExec">
            <el-input v-model="form.nginxExec" placeholder="nginx 可执行文件路径，默认为 'nginx'" />
          </el-form-item>
          <el-form-item label="工作目录" prop="nginxCwd">
            <el-input v-model="form.nginxCwd" placeholder="nginx 工作目录，默认为当前目录" />
          </el-form-item>
          <el-form-item label="配置目录" prop="nginxConfDir">
            <el-input v-model="form.nginxConfDir" placeholder="nginx 配置文件目录，默认为 'conf.d'" />
          </el-form-item>
        </template>

        <template v-else>
          <el-form-item label="容器名称" prop="dockerContainerName">
            <el-input v-model="form.dockerContainerName" placeholder="nginx 容器名称，例如：nginx" />
          </el-form-item>
          <el-form-item label="配置文件宿主机路径" prop="dockerHostPath">
            <el-input v-model="form.dockerHostPath" placeholder="宿主机上的 nginx 配置路径，例如：/data/docker/nginx" />
          </el-form-item>
          <el-form-item label="配置文件容器内路径" prop="dockerContainerPath">
            <el-input v-model="form.dockerContainerPath" placeholder="容器内的 nginx 配置路径，例如：/etc/nginx" />
          </el-form-item>
          <el-form-item label="日志文件宿主机路径" prop="dockerHostLogPath">
            <el-input v-model="form.dockerHostLogPath" placeholder="宿主机上的日志文件路径，例如：/data/docker/nginx/logs" />
          </el-form-item>
          <el-form-item label="日志文件容器内路径" prop="dockerContainerLogPath">
            <el-input v-model="form.dockerContainerLogPath" placeholder="容器内的日志文件路径，例如：/var/log/nginx" />
          </el-form-item>
          <el-form-item label="证书文件宿主机路径" prop="dockerHostSslPath">
            <el-input v-model="form.dockerHostSslPath" placeholder="宿主机上的证书文件路径，例如：/data/docker/nginx/ssl" />
          </el-form-item>
          <el-form-item label="证书文件容器内路径" prop="dockerContainerSslPath">
            <el-input v-model="form.dockerContainerSslPath" placeholder="容器内的证书文件路径，例如：/etc/nginx/ssl" />
          </el-form-item>
        </template>

        <el-form-item>
          <el-button type="primary" @click="submitForm">完成设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { setupAdmin } from '@/services/auth'

const router = useRouter()
const formRef = ref<FormInstance>()

const form = ref({
  username: '',
  password: '',
  confirmPassword: '',
  isDockerized: false,
  nginxExec: '',
  nginxCwd: '',
  nginxConfDir: '',
  dockerContainerName: '',
  dockerHostPath: '',
  dockerContainerPath: '',
  dockerHostLogPath: '',
  dockerContainerLogPath: '',
  dockerHostSslPath: '',
  dockerContainerSslPath: ''
})

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.value.confirmPassword !== '') {
      if (formRef.value) {
        formRef.value.validateField('confirmPassword')
      }
    }
    callback()
  }
}

const validatePass2 = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.value.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const validateDockerFields = (rule: any, value: string, callback: any) => {
  if (form.value.isDockerized && value === '') {
    callback(new Error('Docker 部署模式下此字段为必填'))
  } else {
    callback()
  }
}

const rules = ref<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度不能小于3个字符', trigger: 'blur' }
  ],
  password: [
    { validator: validatePass, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: 'blur' }
  ],
  dockerContainerName: [
    { validator: validateDockerFields, trigger: 'blur' }
  ],
  dockerHostPath: [
    { validator: validateDockerFields, trigger: 'blur' }
  ],
  dockerContainerPath: [
    { validator: validateDockerFields, trigger: 'blur' }
  ]
})

const submitForm = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const { 
          username, 
          password, 
          isDockerized,
          nginxExec, 
          nginxCwd, 
          nginxConfDir,
          dockerContainerName,
          dockerHostPath,
          dockerContainerPath,
          dockerHostLogPath,
          dockerContainerLogPath,
          dockerHostSslPath,
          dockerContainerSslPath
        } = form.value

        await setupAdmin({ 
          username, 
          password,
          nginxConfig: {
            nginxExec: nginxExec || undefined,
            nginxCwd: nginxCwd || undefined,
            nginxConfDir: nginxConfDir || undefined,
            isDockerized,
            dockerContainerName: dockerContainerName || undefined,
            dockerHostPath: dockerHostPath || undefined,
            dockerContainerPath: dockerContainerPath || undefined,
            dockerHostLogPath: dockerHostLogPath || undefined,
            dockerContainerLogPath: dockerContainerLogPath || undefined,
            dockerHostSslPath: dockerHostSslPath || undefined,
            dockerContainerSslPath: dockerContainerSslPath || undefined
          }
        })
        ElMessage.success('初始化成功')
        router.push('/login')
      } catch (error: any) {
        ElMessage.error(error.message || '初始化失败')
      }
    }
  })
}
</script>

<style scoped>
.setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.setup-card {
  width: 600px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h3 {
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #606266;
}
</style> 